// H5端钱包页面 - 红色主题
import React from 'react'
import { Card } from 'konsta/react'
import { Wallet, ArrowUpRight, ArrowDownLeft, RefreshCw } from 'lucide-react'
import designSystem from '../styles/colors'

const TradePage = () => {
  // 占位资产数据
  const assets = [
    { name: '人民币', symbol: 'CNY', amount: '10,250.00', icon: '¥' },
    { name: '港币', symbol: 'HKD', amount: '1,500.00', icon: 'HK$' },
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-red-50 via-orange-50 to-red-100">
      {/* 顶部余额区域 */}
      <div 
        className="relative p-6 pb-8 rounded-b-3xl shadow-lg"
        style={{ background: designSystem.gradients.primary }}
      >
        <div className="flex items-center justify-between mb-4">
          <h1 className="text-2xl font-bold text-white">我的钱包</h1>
          <Wallet size={28} className="text-white/80" />
        </div>
        <div className="mb-2">
          <div className="text-sm text-white/80 mb-1">总资产（CNY）</div>
          <div className="text-4xl font-bold text-white">¥10,250.00</div>
        </div>
      </div>

      {/* 快捷操作 */}
      <div className="grid grid-cols-3 gap-4 p-4 -mt-4">
        {[
          { icon: <ArrowUpRight size={20} />, label: '充值', color: 'from-red-500 to-orange-500' },
          { icon: <ArrowDownLeft size={20} />, label: '提现', color: 'from-orange-500 to-red-500' },
          { icon: <RefreshCw size={20} />, label: '转账', color: 'from-red-500 to-pink-500' },
        ].map((item, index) => (
          <button
            key={index}
            className="flex flex-col items-center p-4 bg-white rounded-xl shadow-md"
          >
            <div className={`w-12 h-12 rounded-full flex items-center justify-center text-white bg-gradient-to-br ${item.color} mb-2`}>
              {item.icon}
            </div>
            <span className="text-xs font-medium text-gray-700">{item.label}</span>
          </button>
        ))}
      </div>

      {/* 资产列表 */}
      <div className="p-4 pt-2">
        <div className="flex justify-between items-center mb-3">
          <h2 className="text-lg font-semibold text-gray-800">资产列表</h2>
          <button className="text-red-500 text-sm">管理</button>
        </div>
        <div className="space-y-3">
          {assets.map((asset, index) => (
            <Card key={index} className="!bg-white shadow-md border-0">
              <div className="flex items-center justify-between p-4">
                <div className="flex items-center">
                  <div className="w-10 h-10 rounded-full bg-gradient-to-br from-red-500 to-orange-500 text-white flex items-center justify-center font-bold mr-3">
                    {asset.icon}
                  </div>
                  <div>
                    <div className="font-medium text-gray-800">{asset.name}</div>
                    <div className="text-xs text-gray-500">{asset.symbol}</div>
                  </div>
                </div>
                <div className="text-right">
                  <div className="font-semibold text-gray-800">{asset.amount}</div>
                  <div className="text-xs text-gray-500">可用</div>
                </div>
              </div>
            </Card>
          ))}
        </div>

        {/* 占位提示 */}
        <div className="flex items-center justify-center py-12 text-gray-400">
          <p className="text-center text-sm">
            更多钱包功能
            <br />
            <span className="text-xs">待组员实现</span>
          </p>
        </div>
      </div>
    </div>
  )
}

export default TradePage

